<template>
    <div class="banner swiper-container" v-if="isBanner">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in bannerLists" :key="index">
                <!-- <img :src="item.F_FilePath" /> -->
				<div class="bans" :style="{'background-image':`url(${item.F_FilePath})`}"></div>
				<div class="swiper-lazy-preloader"></div>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev swiper-button-white"></div>
        <div class="swiper-button-next swiper-button-white"></div>
    </div>
</template>
<script>
/**
 * 支持手动传入 bannerList数组
 * 支持自动传入 path  既路由路径  获取响应banner列表
 */
import { getStore } from "@/utils/store";
import { getBanner } from "@/api";
export default {
	name: "BaseBanner",
	data(){
		return{
			bannerLists:[],
			isBanner:true
		}
	},
	props: {
		bannerList: {
			type: Array,
			default: () => []
		},
		path: {
			type: String,
			default: ""
		}
	},
	watch: {
		bannerList(){
			this.bannerLists = this.bannerList;
			this.bannerInit();
		}
	},
	mounted() {
		if (this.path) this._getBanner();
	},
	methods: {
		_getBanner() {
			const meun = getStore("meun");
			const menuid = meun.find((o) => o.F_Url == this.path).F_Id;
			if (menuid) {
				getBanner({ menuid }).then((res) => {
					this.bannerLists = res.data.Data || [];
					this.isBanner = this.bannerLists.length != 0;
					this.bannerInit();
				});
			}
		},
		bannerInit() {
			this.$nextTick(() => {
				new window.Swiper(".swiper-container", {
					autoplay: this.bannerLists.length <= 1 ? false : 4000,//可选选项，自动滑动
					/* grabCursor: true,//鼠标样式根据浏览器不同而定 */
					/*  设置每隔3000毫秒切换 */
					loop:true,
					pagination : '.swiper-pagination',
					prevButton:'.swiper-button-prev',
					nextButton:'.swiper-button-next'
				});
			});
		}
	}
};
</script>